<template>
  <div id="hot">
    <div class="title">
      <img
        src="//s3.music.126.net/mobile-new/img/hot_music_bg_2x.jpg?f01a252389c26bcf016816242eaa6aee="
      />
      <div class="pic"></div>
      <p>更新日期 : 07月20日</p>
    </div>
    <div class="box">
      <template v-for="(item, index) in hotArr">
        <!-- <div :key="item.id" class="info"> -->
          <router-link tag="div" class="info" :key="item.id" :to="`/play/${item.id}`">

          <div class="num" :class="{ active: index < 3 }">
            {{ index + 1 > 9 ? index + 1 : "0" + (index + 1) }}
          </div>
          <div class="left">
            {{ item.name }}
            <!-- <span>{{ item.ar[0].name }}</span> -->
            <p>
              <span class="iconfont icon-sq" style="color: red"></span>
              {{ item.ar[0].name }} - {{ item.al.name }}
            </p>
            <!-- {{ item.song.album.name }} -->
          </div>
          <div class="right">
            <span class="iconfont icon-bofang"></span>
          </div>
          </router-link>
        <!-- </div> -->
      </template>
    </div>
    <footer>
      <div>查看完整榜单<span class="iconfont icon-arrow-left"></span></div>
    </footer>
  </div>
</template>

<script>
// import musicinfo from "../../components/MusicInfo.vue";
export default {
  data: () => {
    return {
      hotArr: JSON.parse(localStorage.getItem("hotArr")) || [],
    };
  },
  // methods:{
  //   arrInfo(){
  //     this.hotArr=res.data.playlist.tracks
  //   }
  // },

  watch: {
    hotArr() {
      localStorage.setItem("hotArr", JSON.stringify(this.hotArr));
    },
  },
  async mounted() {
    let res = await this._axios.get("/playlist/detail?id=3778678");
    this.hotArr = res.data.playlist.tracks.slice(0, 20);
  },
};
</script>

<style lang="scss" scoped>
#hot {
  .title {
    position: relative;
    width: _vw(750);
    height: _vw(292);
    &::after {
      content: "";
      width: _vw(750);
      height: _vw(292);
      top: 0;
      left: 0;
      position: absolute;
      display: inline-block;
      background-color: #000;
      z-index: 0;
      opacity: 0.1;
    }
    p {
      position: absolute;
      color: #eededb;
      bottom: _vw(65);
      left: _vw(35);
      font-size: _vw(18);
    }
    img {
      width: 100%;
      // height: 100%;
      position: absolute;
    }
    .pic {
      width: _vw(270);
      height: _vw(136);
      position: absolute;
      top: _vw(58);
      left: _vw(35);

      background: url("//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=")
        no-repeat;
      background-size: 110%;
      background-position: _vw(-40) _vw(-50);
    }
  }
  .box {
    .info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 _vw(15);
      height: _vw(100);
      border-bottom: 1px solid #d4d0d0;
      .num {
        // color: red;
        font-size: _vw(40);
        height: 100%;
        margin-right: _vw(20);
        display: flex;
        align-items: center;
        &.active {
          color: red;
        }
      }

      .left {
        width: _vw(690);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: _vw(35);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        padding: _vw(15) 0;
        p {
          font-size: _vw(20);
          color: #9e9b9b;
          span {
           font-size: _vw(3);
           position: relative;
           top: _vw(5);
          }
        }
        span {
          color: #afa9a9;
        }
      }
      .right {
        span {
          color: #c1c1c1;
          font-size: _vw(50);
        }
      }
    }
  }
  footer {
    height: _vw(100);
    display: flex;
    justify-content: center;
    align-items: center;
    div {
      font-size: _vw(28);
      color: #aeaead;
      span {
        font-size: _vw(28);
      }
    }
  }
}
</style>